<!DOCTYPE html>
<html lang="">

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<meta name="theme-color" content="#317EFB" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=0" name="viewport">
<meta name="keywords" content="">
<meta property="og:type" content="article">
<meta property="og:title" content="js基础">
<meta property="og:url" content="https://yysff.gitee.io/ye-blog/2020/12/10/js%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-12-10T11:10:59.000Z">
<meta property="article:modified_time" content="2022-06-07T12:37:12.571Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="js">
<meta name="twitter:card" content="summary">

<title>
    js基础
</title>




<link rel="preload" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1518765_bkgx3wku6h4.css">


<link rel="stylesheet" href="/ye-blog/css/plugins/bootstrap.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/locomotive-scroll.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/swiper.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/fancybox.min.css">
<link rel="stylesheet" href="/ye-blog/css/plugins/font-awesome.min.css">


<!-- variable -->
<script>window.TYPED_TEXT=[
  "Web Developer"
]</script>
<script>window.FAVICON={
  "icon16": null,
  "icon32": null,
  "appleTouchIcon": null,
  "webmanifest": null,
  "visibilitychange": false,
  "hidden": null,
  "showText": "(/≧▽≦/)咦！又好了！",
  "hideText": "(●—●)喔哟，崩溃啦！"
}</script>
<script>window.HTMEM_VERSION='1.0.2'</script>
<link data-theme-type="style-light" rel="stylesheet" href="/ye-blog/css/style-light.css?v=1.0.2" id="trm-switch-style">
<link data-theme-type="style-dark" rel="stylesheet" href="/ye-blog/css/style-dark.css?v=1.0.2" id="trm-switch-style">

<!-- theme css -->
<script>
    let themeMode = localStorage.getItem('theme-mode') === 'style-dark' ? 'style-light' : 'style-dark';
    let linkdom = document.querySelector('[data-theme-type='+themeMode+']');
    if(linkdom) linkdom.remove();
</script>

<!-- Site Analytics -->
 
<meta name="generator" content="Hexo 5.4.2"></head>

<body>

  <!-- app wrapper -->
  <div class="trm-app-frame">

    <!-- page preloader -->
    <div class="trm-preloader">
    <div class="trm-holder">
        <div class="preloader">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
    <!-- page preloader end -->

    <!-- change mode preloader -->
    <div class="trm-mode-swich-animation-frame">
    <div class="trm-mode-swich-animation"><i class="far fa-sun"></i>
        <div class="trm-horizon"></div>
        <i class="far fa-moon"></i>
    </div>
</div>
    <!-- change mode preloader end -->

      <!-- scroll container -->
      <div id="trm-dynamic-content" class="trm-swup-animation">
        <div id="trm-scroll-container" class="trm-scroll-container" data-scroll-container style="opacity: 0">
          <div data-scroll-section id="content" class="trm-scroll-section">
            <!-- top bar -->
            <div class="trm-top-bar" data-scroll data-scroll-sticky data-scroll-target="#content" data-scroll-offset="-10">
	<div class="container">
		<div class="trm-left-side">
			<!-- logo -->
			<a href="/ye-blog/" class="trm-logo-frame trm-anima-link">
				<img src="/ye-blog/logo.png" alt="logo">
				<div class="trm-logo-text">
					Theme
					<span>Async</span>
				</div>
			</a>
			<!-- logo end -->
		</div>
		<div class="trm-right-side">

			<!-- menu -->
			<div class="trm-menu">
				<nav>
					<ul>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/">
								首页
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/archives/">
								归档
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/links/">
								友链
							</a>
							
						</li>
						
						<li class="menu-item-has-children ">
							<a  href="/ye-blog/about/">
								关于
							</a>
							
						</li>
						
					</ul>
				</nav>
			</div>
			<!-- menu end -->

			<!-- mode switcher place -->
			<div class="trm-mode-switcher-place"></div>
			<!-- mode switcher place end -->

		</div>
		<div class="trm-menu-btn">
			<span></span>
		</div>
	</div>
</div>
            <!-- top bar end -->

            <!-- body -->
            <div class="trm-content-start">

    <!-- banner -->
    <div class="trm-banner" data-scroll data-scroll-direction="vertical">
    <!-- banner cover -->
    <img src="https://pic1.zhimg.com/v2-b3c2c6745b9421a13a3c4706b19223b3_r.jpg?source=1940ef5c" alt="banner" class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-3">
    <!-- banner cover end -->

    <!-- banner slideshow cover-->
    <!-- <div class="swiper-container trm-slideshow" data-scroll data-scroll-direction="vertical" data-scroll-speed="-4">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="/img/blog/b1.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
            <div class="swiper-slide"><img src="/img/blog/b2.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
            <div class="swiper-slide"><img src="/img/blog/b3.jpg" alt="banner" class="trm-banner-cover" data-swiper-parallax-y="-200" data-swiper-parallax-scale="1.2"></div>
        </div>
    </div> -->
    <!-- banner slideshow cover end -->

    <!-- banner video cover -->
    <!-- <video autoplay="autoplay" loop muted playsinline webkit-playinginline class="trm-banner-cover" data-scroll data-scroll-direction="vertical" data-scroll-speed="-4">
        <source src="img/banner.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        <source src="img/banner.webm" type='video/webm; codecs="vp8, vorbis"'>
        <source src="img/banner.ogg" type='video/ogg; codecs="theora, vorbis"'>
        Your browser does not support HTML5 video.
    </video> -->
    <!-- banner video cover end -->

    <!-- banner cover end -->

    <!-- banner content -->
    <div class="trm-banner-content trm-overlay">
        <div class="container" data-scroll data-scroll-direction="vertical" data-scroll-speed="0">
            <div class="row">
                <div class="col-lg-4"></div>
                <div class="col-lg-8">

                    <!-- banner title -->
                    <div class="trm-banner-text">
                        <div class="trm-label trm-mb-20">
                            NEWS LETTER
                        </div>
                        <h1 class="trm-mb-30 trm-hsmb-font">
                            js基础
                        </h1>

                        
                            <ul class="trm-breadcrumbs trm-label">
                                <li>
                                    <a href="/ye-blog/" class="trm-anima-link">Home</a>
                                </li>
                                <li>
                                    <span>
                                        2020
                                    </span
                                ></li>
                            </ul>
                        
                    </div>
                    <!-- banner title end -->

                    <!-- scroll hint -->
                    <a href="#about-triger" data-scroll-to="#about-triger" data-scroll-offset="-130" class="trm-scroll-hint-frame">
                        <div class="trm-scroll-hint"></div>
                        <span class="trm-label">Scroll down</span>
                    </a>
                    <!-- scroll hint end -->

                </div>
            </div>
        </div>
    </div>
    <!-- banner content end -->
</div>
    <!-- banner end -->

    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <!-- main card -->
                <div class="trm-main-card-frame trm-sidebar">
    <div class="trm-main-card" data-scroll data-scroll-repeat data-scroll-sticky data-scroll-target="#content" data-scroll-offset="60">
        <!-- card header -->
        <div class="trm-mc-header">
            <div class="trm-avatar-frame trm-mb-20"><img class="trm-avatar" src="博主头像信息" alt="Avatar"> </div>
            <h5 class="trm-name trm-mb-15">
                ThemeAsync
            </h5>
            <div class="trm-label">
                I`m
                <span class="trm-typed-text">
                    <!-- Words for theme.user.typedText -->
                </span>
            </div>
        </div>
        <!-- card header end -->
        <div class="trm-divider trm-mb-40 trm-mt-40"></div>
        <!-- sidebar social -->
        <div class="trm-social">
            
                <a href="https://github.com" rel="nofollow" target="_blank">
                    <i class="fab fa-github"></i>
                </a>
            
                <a href="https://gitee.com" rel="nofollow" target="_blank">
                    <i class="iconfont cg-gitee"></i>
                </a>
            
                <a href="https://weibo.com/" rel="nofollow" target="_blank">
                    <i class="iconfont cg-weibo"></i>
                </a>
            
        </div>
        <!-- sidebar social end -->
        <div class="trm-divider trm-mb-40 trm-mt-40"></div>
        <!-- info -->
        <ul class="trm-table trm-mb-20">
            
                <li>
                    <div class="trm-label">
                        Residence:
                    </div>
                    <div class="trm-label trm-label-light">
                        Mars
                    </div>
                </li>
            
                <li>
                    <div class="trm-label">
                        City:
                    </div>
                    <div class="trm-label trm-label-light">
                        WuHan
                    </div>
                </li>
            
                <li>
                    <div class="trm-label">
                        Age:
                    </div>
                    <div class="trm-label trm-label-light">
                        18
                    </div>
                </li>
            
        </ul>
        
    </div>
</div>
                <!-- main card end -->
            </div>
            <div class="col-lg-8">
                <!-- content -->
                <div class="trm-content" id="trm-content">
                    <div data-scroll data-scroll-repeat data-scroll-offset="500" id="about-triger"></div>
                    
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-calendar-alt trm-icon"></i><br>
                                12/10
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-clock trm-icon"></i><br>
                                07:10
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="trm-card trm-label trm-label-light text-center"><i class="far fa-user trm-icon"></i><br>
                                ThemeAsync
                            </div>
                        </div>
                    </div>

                    <article class="trm-card trm-publication">
                        <hr>
<span id="more"></span>

<h2 id="一、JS基础及概要"><a href="#一、JS基础及概要" class="headerlink" title="一、JS基础及概要"></a>一、JS基础及概要</h2><p><strong>JavaScript</strong>是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等。<br><strong>JS</strong>由三部分组成，分别是语法ECMAScript、对象DOM、浏览器对象BOM。</p>
<h3 id="1-JS基本使用"><a href="#1-JS基本使用" class="headerlink" title="1.JS基本使用"></a>1.JS基本使用</h3><p>在html中，JavaScript代码必须要位于<code>&lt;script&gt;&lt;/script&gt;</code>之间</p>
<h4 id="1-1-JS的书写位置"><a href="#1-1-JS的书写位置" class="headerlink" title="1.1 JS的书写位置"></a>1.1 JS的书写位置</h4><ul>
<li>head中的脚本：需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。</li>
<li>body中的脚本: 当页面被加载时执行的脚本放在HTML的body时，一般放在body部分的脚本通常被用来生成页面的内容。<ul>
<li>由于脚本会阻塞其他资源的下载（如图片等）和页面渲染，直到脚本全部下载并执行完成后，页面的渲染才会继续，因此推荐将所有的<code>&lt;script&gt;</code>标签尽可能放到<code>&lt;body&gt;</code>标签的底部，以尽量减少对整个页面下载的影响。</li>
<li>为了代码的简洁、使代码优化性更强强，也可以将js通过外部方式进行引用。<br><code>&lt;script src=&#39;###.js&#39;&gt;&lt;/script&gt;</code></li>
</ul>
</li>
</ul>
<h3 id="2-引用及加载"><a href="#2-引用及加载" class="headerlink" title="2.引用及加载"></a>2.引用及加载</h3><h4 id="2-1-引用优先级"><a href="#2-1-引用优先级" class="headerlink" title="2.1 引用优先级"></a>2.1 引用优先级</h4><ul>
<li>head和bady中都有script，那么是按照自上而下的顺序进行执行的</li>
<li>一般写在body之后，并且引用外部js文件</li>
</ul>
<h4 id="2-2-加载顺序"><a href="#2-2-加载顺序" class="headerlink" title="2.2 加载顺序"></a>2.2 加载顺序</h4><ul>
<li>默认同步：一个任务执行完成再完成另一个</li>
<li>异步：同时执行多个任务</li>
<li>延迟：html解析完成后执行</li>
</ul>
<h3 id="3-基本语法"><a href="#3-基本语法" class="headerlink" title="3.基本语法"></a>3.基本语法</h3><h4 id="3-1-输出语句"><a href="#3-1-输出语句" class="headerlink" title="3.1 输出语句"></a>3.1 输出语句</h4><ul>
<li><code>document.write(&#39;&#39;)</code>在当前位置插入文本，并且覆盖之前内容。</li>
<li><code>document.getElementById(&#39;标签id&#39;).innerHTML=&quot;文本内容&quot;</code>在选定的标签内部添加文本内容。</li>
<li><code>console.log(&#39;&#39;)</code>控制台输出</li>
<li><code>alert()</code>弹窗显示</li>
</ul>
<h4 id="3-2-定义变量"><a href="#3-2-定义变量" class="headerlink" title="3.2 定义变量"></a>3.2 定义变量</h4><ul>
<li>步骤：声明+初始化<ul>
<li>声明：对一个变量进行命名</li>
<li>初始化：对变量进行赋值</li>
<li>严格写法中，两者缺一不可，非严格写法可以省略声明即<code>a = 1</code></li>
</ul>
</li>
<li>变量定义规范<ul>
<li>多个变量同时定义<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a , b , c;</span><br><span class="line">    a = <span class="number">1</span>;</span><br><span class="line">    b = <span class="number">2</span>;</span><br><span class="line">    c = <span class="number">3</span>;</span><br></pre></td></tr></table></figure>
<h2 id="二、JS数据类型"><a href="#二、JS数据类型" class="headerlink" title="二、JS数据类型"></a>二、JS数据类型</h2><h3 id="1-变量数据类型"><a href="#1-变量数据类型" class="headerlink" title="1. 变量数据类型"></a>1. 变量数据类型</h3>JavaScript的数据类型分为两种：<strong>基本数据类型</strong>和<strong>引用数据类型</strong><h4 id="1-1-基本数据类型"><a href="#1-1-基本数据类型" class="headerlink" title="1.1 基本数据类型"></a>1.1 基本数据类型</h4></li>
</ul>
</li>
<li>字符串String:’HelloWorld’,’ ‘;</li>
<li>数字Number:1,2,3,4,5,6,1.11123;</li>
<li>布尔Boolean:true,false;</li>
<li>未定义Undefned</li>
<li>空Null</li>
<li>Symbol<h4 id="1-2-引用数据类型"><a href="#1-2-引用数据类型" class="headerlink" title="1.2 引用数据类型"></a>1.2 引用数据类型</h4>object、 数组、 函数<h3 id="2-判断数据类型"><a href="#2-判断数据类型" class="headerlink" title="2. 判断数据类型"></a>2. 判断数据类型</h3></li>
<li><code>typeof</code>可以识别基础数据类型string、number、boolean、undefined、symbol，但是不能识别null。<figure class="highlight plaintext"><figcaption><span>bool);</span><a target="_blank" rel="noopener" href="//boolean">link</a></figcaption><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">console.log(typeof num);//number</span><br><span class="line">console.log(typeof str);//string</span><br><span class="line">console.log(typeof und);//undefined</span><br><span class="line">console.log(typeof nul);//object</span><br><span class="line">console.log(typeof s1); //symbol </span><br></pre></td></tr></table></figure></li>
<li><code>instanceof</code>能识别出引用数据类型，可以检测出多层继承关系。<br><code>console.log(Object instanceof Object);   //true</code><br>还可以检测构造函数的原型函数是否在某个实例化对象的原型链上。</li>
<li><code>constructor</code></li>
<li><code>tostring</code> 此方法可以相对较全的判断js的数据类型。<br><code>Object.prototype.toString.call()</code></li>
<li>一般基本的类型可以选择typeof，引用类型可以使用instanceof。<h3 id="3-基础数据类型转换"><a href="#3-基础数据类型转换" class="headerlink" title="3. 基础数据类型转换"></a>3. 基础数据类型转换</h3></li>
<li><code>Number()</code>转为数字</li>
<li><code>String()</code>转为字符串</li>
<li><code>Boolean()</code>转为布尔</li>
</ul>
<p><strong>整数或浮点数提取</strong></p>
<ul>
<li>提取整数<code>parseInt()</code>按从左到右的顺序,逐个分析每个字符,直到发现非数字字符为止。</li>
<li>提取浮点数<code>parseFloat</code>按从左到右的顺序,识别第一个出现的小数点。<h3 id="4-运算符"><a href="#4-运算符" class="headerlink" title="4. 运算符"></a>4. 运算符</h3>JS中为我们定义了一套对数据进行运算的运算符。<h4 id="4-1算数运算符"><a href="#4-1算数运算符" class="headerlink" title="4.1算数运算符"></a>4.1算数运算符</h4>一元运算符：递增<code>++</code> 递减<code>--</code></li>
<li><code>num++</code>先加一,再赋值</li>
<li><code>++num</code>先赋值,再加一</li>
<li><code>num--</code>先减一,再赋值</li>
<li><code>--num</code>先赋值,再减一<h4 id="4-2-赋值运算符"><a href="#4-2-赋值运算符" class="headerlink" title="4.2 赋值运算符"></a>4.2 赋值运算符</h4></li>
<li><code>x += y</code>先相加再赋值，即x=x+y;</li>
<li><code>-=``*=``/=``%=</code>同理<h4 id="4-3-字符串运算符"><a href="#4-3-字符串运算符" class="headerlink" title="4.3 字符串运算符"></a>4.3 字符串运算符</h4></li>
<li>当<code>+</code>两端任意一端存在string类型时，此时为拼接。</li>
<li>除了上述意外事件均会存在隐式转换，转换为number类型后计算。</li>
<li>如果无法转换为number类型则返回NAN。<h4 id="4-4-比较运算符"><a href="#4-4-比较运算符" class="headerlink" title="4.4 比较运算符"></a>4.4 比较运算符</h4></li>
<li><code>&gt; &lt; == != === !==</code><h4 id="4-5-逻辑运算符"><a href="#4-5-逻辑运算符" class="headerlink" title="4.5 逻辑运算符"></a>4.5 逻辑运算符</h4></li>
<li><code>&amp;&amp;</code>与</li>
<li><code>||</code>或</li>
<li><code>!</code>非<h4 id="4-6-逗号运算符"><a href="#4-6-逗号运算符" class="headerlink" title="4.6 逗号运算符"></a>4.6 逗号运算符</h4>逗号是二元运算符，自左向右执行。<h4 id="4-7-三元运算符"><a href="#4-7-三元运算符" class="headerlink" title="4.7 三元运算符"></a>4.7 三元运算符</h4><code>a &gt; b ? a : b</code> 判断当a&gt;b时，返回a，否则返回b。</li>
</ul>
<h3 id="5-运算符优先级"><a href="#5-运算符优先级" class="headerlink" title="5. 运算符优先级"></a>5. 运算符优先级</h3><ol>
<li><code>()</code></li>
<li><code>++ -- !</code></li>
<li><code>* / %</code></li>
<li><code>+ -</code></li>
<li><code>&lt; &gt;</code></li>
<li><code>== != === !==</code></li>
<li><code>&amp;&amp;</code></li>
<li><code>||</code></li>
<li><code>三元运算符</code></li>
</ol>
<h2 id="三、流程控制语句"><a href="#三、流程控制语句" class="headerlink" title="三、流程控制语句"></a>三、流程控制语句</h2><blockquote>
<ol>
<li>顺序结构语句  js默认由上至下执行</li>
<li>分支结构语句  js会根据条件的判断,决定是否执行某段代码</li>
<li>循环结构语句  js会根据条件的判断,反复的执行某段代码</li>
</ol>
</blockquote>
<h3 id="1-判断语句"><a href="#1-判断语句" class="headerlink" title="1. 判断语句"></a>1. 判断语句</h3><ul>
<li>if</li>
<li>switch<h4 id="1-1-if判断语句"><a href="#1-1-if判断语句" class="headerlink" title="1.1 if判断语句"></a>1.1 if判断语句</h4></li>
<li><code>if(判断)&#123;执行&#125;</code>当指定条件为 true 时，执行后续代码。</li>
<li><code>if else</code>当指定条件为 true 时执行后续代码，否则执行else后代码<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">if (判断语句)&#123;</span><br><span class="line">  ​	当条件为 true 时执行的代码</span><br><span class="line">  &#125;</span><br><span class="line">  else&#123;</span><br><span class="line">  ​	当条件不为 true 时执行的代码</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure></li>
<li><code>else if</code>嵌套判断<h4 id="1-2-switch语句"><a href="#1-2-switch语句" class="headerlink" title="1.2 switch语句"></a>1.2 switch语句</h4>根据不同断点进行判断并执行相应代码<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">switch(n)</span><br><span class="line">&#123;</span><br><span class="line">​    case 1:</span><br><span class="line">​        执行代码块 1</span><br><span class="line">​        break;</span><br><span class="line">​    case 2:</span><br><span class="line">​        执行代码块 2</span><br><span class="line">​        break;</span><br><span class="line">   default:</span><br><span class="line">​        与 case 1 和 case 2 不同时执行的代码</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
</ul>
<p><strong>如果代码只能够没有*<code>break</code>*时，会继续执行后续代码直到结束</strong></p>
<h3 id="2-循环语句"><a href="#2-循环语句" class="headerlink" title="2. 循环语句"></a>2. 循环语句</h3><ul>
<li>for循环</li>
<li>while循环<h4 id="2-1-for循环语句"><a href="#2-1-for循环语句" class="headerlink" title="2.1 for循环语句"></a>2.1 for循环语句</h4><code>for (var i = 0; i &lt; 100 ; i++) &#123;&#125;</code>通过()中的条件进行循环并执行{}中的代码。<h4 id="2-2-while和do-while语句"><a href="#2-2-while和do-while语句" class="headerlink" title="2.2 while和do while语句"></a>2.2 while和do while语句</h4><code>while(i &lt; 100)&#123;i++;&#125;</code>与for不同的是递增在代码执行片段中。<br><code>do &#123;&#125; while (i &lt; 100)</code>将执行顺序调换，先执行再判断。</li>
</ul>
<h4 id="2-3-循环跳出"><a href="#2-3-循环跳出" class="headerlink" title="2.3 循环跳出"></a>2.3 循环跳出</h4><p>当条件满足时可以通过<code>break</code>和<code>continue</code>跳出循环</p>
<ul>
<li><code>break</code>关键字<br>break是结束当前循环，返回上一层</li>
<li><code>continue</code>关键字<br>跳出本次循环开始下一次循环</li>
</ul>
<h4 id="2-4-死循环"><a href="#2-4-死循环" class="headerlink" title="2.4 死循环"></a>2.4 死循环</h4><p>避免出现死循环，造成内存溢出。以下为两种死循环写法</p>
<ul>
<li><code>for(;true;)</code>或<code>for(;;)</code></li>
<li><code>while(true)</code></li>
</ul>
<h2 id="四、数组基本使用"><a href="#四、数组基本使用" class="headerlink" title="四、数组基本使用"></a>四、数组基本使用</h2><h3 id="1-创建数组"><a href="#1-创建数组" class="headerlink" title="1.创建数组"></a>1.创建数组</h3><ul>
<li>  构造函数式<code>var arr = new Array();arr[0] = &#39;1&#39;;arr[1] = &#39;2&#39;</code></li>
<li>  简洁式<code>var arr = new Array(&#39;1&#39;,&#39;2&#39;)</code></li>
<li>  常用<code>var arr = [&#39;1&#39;,&#39;2&#39;]</code></li>
</ul>
<h3 id="2-数组查询"><a href="#2-数组查询" class="headerlink" title="2.数组查询"></a>2.数组查询</h3><p>通过数组中元素的下标进行查询<br><code>var firstArr = arr[0];</code></p>
<h3 id="3-数组修改"><a href="#3-数组修改" class="headerlink" title="3.数组修改"></a>3.数组修改</h3><p>同样通过下标进行修改，当没有此下标时，数组会自动增加至该下标位置。<br><code>arr[1] = &#39;3&#39;;</code></p>
<h2 id="五、数组方法"><a href="#五、数组方法" class="headerlink" title="五、数组方法"></a>五、数组方法</h2><p>1.末尾增加push()<br>2.末尾删除pop()<br>3.头部增加unshift()<br>4.头部删除shift()<br>5.增删改splice()<br>6.反转reverse()<br>7.拼接join()</p>
<ul>
<li>字符串方法split()进行拆分</li>
</ul>
<p>8.截取slice()<br>9.排序sort()<br>10.获取数组对象基本值valueOf()<br>11.数组对象转为字符串toString()</p>

                    </article>

                    <!-- blog -->
                    <div class="row">
                        <div class="col-lg-12">
                            <!-- title -->
                            <h5 class="trm-mb-40 trm-title-with-divider">
                                Other Articles
                                <span data-number="02"></span>
                            </h5>
                        </div>
                        
                            <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/ye-blog/2021/01/26/%E8%8A%82%E7%82%B9/" class="trm-cover-frame trm-anima-link">
            <img src="/ye-blog/img/block.jpg" alt="cover">
        </a>
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" #.">
                    unclassified
                </a>
            </div>
            <h5>
                <a href="/ye-blog/2021/01/26/%E8%8A%82%E7%82%B9/" class="trm-anima-link">
                    dom节点
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>
                    01/26
                </li>
                <li>
                    09:11
                </li>
                <li>
                    395
                </li>
            </ul>
        </div>
    </div>
</div>
                        
                        
                            <div class="col-lg-6">
    <div class="trm-blog-card trm-scroll-animation" data-scroll data-scroll-offset="40">
        <a href="/ye-blog/2020/11/15/%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90/" class="trm-cover-frame trm-anima-link">
            <img src="/ye-blog/img/block.jpg" alt="cover">
        </a>
        <div class="trm-card-descr">
            <div class="trm-label trm-category trm-mb-20">
                <a href=" #.">
                    unclassified
                </a>
            </div>
            <h5>
                <a href="/ye-blog/2020/11/15/%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90/" class="trm-anima-link">
                    css弹性盒子
                </a>
            </h5>
            <div class="trm-divider trm-mb-20 trm-mt-20"></div>
            <ul class="trm-card-data trm-label">
                <li>
                    11/15
                </li>
                <li>
                    08:11
                </li>
                <li>
                    379
                </li>
            </ul>
        </div>
    </div>
</div>
                        
                    </div>
                    <!-- blog end -->

                    

                    <div class="trm-divider trm-mb-40"></div>

                    <!-- footer -->
                    <footer class="trm-scroll-animation" data-scroll data-scroll-offset="50">
    <div class="trm-label">
        ©  2022- 2022 ·
        <span class="trm-accent-color">
            ThemeAsync
        </span>
    </div>
    <div class="trm-label">
        The blog has been lovely to run:
        <span id="since" class="trm-accent-color"></span>
        day
    </div>
</footer>
<script>
    function show_date_time () {
        BirthDay = new Date("04/10/2022 17:00:00");
        today = new Date();
        timeold = (today.getTime() - BirthDay.getTime());
        msPerDay = 24 * 60 * 60 * 1000
        day = Math.floor(timeold / msPerDay)
        since.innerHTML = day
    }
    show_date_time()
</script>
                    <!-- footer end -->
                </div>
                <!-- content end -->
            </div>
        </div>
    </div>
</div>


    
  
  
            <!-- body end -->
          </div>
        </div>
      </div>
      <!-- scroll container end -->

      <!-- mode switcher -->
      <div class="trm-hidden-switcher">
        <div class="trm-mode-switcher"><i class="far fa-sun"></i>
          <input class="tgl tgl-light" id="trm-swich" type="checkbox">
          <label class="trm-swich" for="trm-swich"></label>
          <i class="far fa-moon"></i>
        </div>
      </div>
      <!-- mode switcher end -->

  </div>
  <!-- app wrapper end -->

  
<script src="/ye-blog/js/plugins/jquery.min.js"></script>
<script src="/ye-blog/js/plugins/swup.min.js"></script>
<script src="/ye-blog/js/plugins/locomotive-scroll.js"></script>
<script src="/ye-blog/js/plugins/typing.js"></script>
<script src="/ye-blog/js/plugins/fancybox.min.js"></script>
<script src="/ye-blog/js/plugins/swiper.min.js"></script>


<!-- 评论插件 -->


<!-- Service Worker -->


<script src="/ye-blog/js/main.js?v=1.0.2"></script>


</body>

</html>